<template>
  <div class="mui-content">
    <!--<transition name="fade">-->
      <div class="myRating" >
        <div class="ratContent">
          <div class="title">{{title}}</div>
          <div class="msg">
            {{msg}}
          </div>
          <div class="foot" ><div @click="submit">{{confirm}}</div></div>
        </div>
      </div>
    <!--</transition>-->
  </div>

</template>

<script>
    export default {
        name: "Prompt.vue",
      props:{
          title:String,
          msg:String,
          confirm:String
      },
      methods:{
        submit(){
          this.$emit("confirm1")
        }
      }
    }

</script>

<style scoped>
  .mui-content .myRating{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color:rgba(111,111,111,0.8);
    left: 0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

  }
  .mui-content .myRating .ratContent{
    width: 14rem;
    min-height: 9rem;
    background-color: white;
    line-height: 100%;
    text-align: center;
    border-radius: 6px;
  }
  .mui-content .myRating .ratContent .title{
    height:3rem;
    line-height: 3.9rem;
    font-size: 1.2rem;
    color: black;
  }

  .mui-content .myRating .ratContent .foot div{
    /*float: left;*/
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(111,111,111,0.2);
    min-height: 2.5rem;
    line-height: 2.5rem;
    color: #57bbfa;
    /*position: absolute;*/
    font-size: 0.9rem;
    /*margin-top:3rem;*/
  }
  .mui-content .msg{
    padding-left: 1rem;
    width: 13rem;
    min-height: 3.5rem;
    line-height: 1.7rem;
    overflow: hidden;
    font-size: 0.9rem;
    color: #8f8f94;
  }

  /*彈出框*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .8s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }

</style>
